<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>心田花开企业简介</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }
        img {
            max-width: 100% !important;
            height: auto;
        }
        .main {
            width: 100%;
            overflow: hidden;
        }
        .content{
            margin-bottom: 48px;
        }
        .content p{
            padding: 0 1em;
        }
        /*底部栏*/
        .pagination{
            width: 100%;
            text-align: center;
            padding: 10px 0;
        }
        .fixed-pagination{
            position: fixed;
            bottom: 0;
            left: 0;
        }
        .page-link{
            display: inline-block;
        }
        .page-link button{
            vertical-align: middle;
            margin-right: 8px;
            padding: 0 10px;
            height: 32px;
            line-height: 32px;
            min-width: 32px;
            outline: none;
            cursor: pointer;
            text-align: center;
            font-size: 12px;
            background-color: #fff;
            border: 1px solid #dddee1;
            border-radius: 4px;
            -webkit-transition: border .2s ease-in-out, color .2s ease-in-out;
            transition: border .2s ease-in-out, color .2s ease-in-out;
        }
        .page-link button:active{
            border-color: #2d8cf0;
        }
        /*侧边栏*/
        .sidebar-bg{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #A5A3A2;
            display: none;
        }
        .show-bg{
            display: block;
        }
        .sidebar{
            position: fixed;
            top: 0;
            left: 0;
            width: 90%;
            height: 100%;
            background-color: #fff;
            transition: transform .5s ease-in-out;
            transform: translateX(-100%);
        }
        .show-sidebar{
            transform: translateX(0);
        }
        .chapter{
            overflow: hidden;
            margin-top: 10px;
        }
        .sidebar .section-left{
            display: inline-block;
            width: 20%;
            padding-left: 10px;
            vertical-align: top;
        }
        .sidebar .chapter-title{
            display: inline-block;
            text-align: center;
            width: 32px;
            line-height: 32px;
            border-radius: 50%;
            background-color: #bd9f6b;
            color: #fff;
        }
        .section-left-box{
            position: relative;
            width: 32px;
        }
        .sidebar .section-line{
            position: absolute;
            top: 120%;
            left: 50%;
            width: 64px;
            transform: rotate(90deg);
            transform-origin:0 0;
            border-bottom: 2px solid #bd9f6b;
        }
        .chapter-wrap{
            display: inline-block;
            width: 80%;
            padding-right: 20px;
            overflow: hidden;
        }
        .sidebar .section{
            position: relative;
            line-height: 32px;
        }
        .sidebar .section-head{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="content"></div>
    <ul class="pagination fixed-pagination">
        <li class="page-link">
            <button id="prev">上一页</button>
        </li>
        <li class="page-link">
            <button id="sidebar-button">目录</button>
        </li>
        <li class="page-link">
            <button id="next">下一页</button>
        </li>
    </ul>
</div>
<div class="sidebar-bg">
</div>
<div class="sidebar">
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 目录
    const catalog = [
        {
            context: '壹',
            title: '企业简介',
            src: "'//" + location.host + location.pathname + "?page=1'",
            children: [
                {
                    title: '关于我们',
                    src: "'//" + location.host + location.pathname + "?page=2'"
                },
                {
                    title: '发展版图',
                    src: "'//" + location.host + location.pathname + "?page=3'"
                }
            ]
        },
        {
            context: '贰',
            title: '情商语文',
            src: "'//" + location.host + location.pathname + "?page=4'",
            children: [
                {
                    title: '理念展示',
                    src: "'//" + location.host + location.pathname + "?page=5'"
                },
                {
                    title: '课程研发',
                    src: "'//" + location.host + location.pathname + "?page=6'"
                },
                {
                    title: '师资选培',
                    src: "'//" + location.host + location.pathname + "?page=8'"
                },
                {
                    title: '360课后服务',
                    src: "'//" + location.host + location.pathname + "?page=12'"
                },
                {
                    title: '语言基础积累',
                    src: "'//" + location.host + location.pathname + "?page=14'"
                },
                {
                    title: '思维方法优化',
                    src: "'//" + location.host + location.pathname + "?page=17'"
                },
                {
                    title: '人文素养积淀',
                    src: "'//" + location.host + location.pathname + "?page=22'"
                }
            ]
        },
        {
            context: '叁',
            title: '附录',
            src: "'//" + location.host + location.pathname + "?page=27'",
            children: []
        }
    ]
    function getPage(src) {
        window.location.href = src
        return false
    }
    $(document).ready(function () {
        var page = parseInt(location.href.split('page=')[1] || 1)
        var chapterStr = ''
        catalog.forEach(function (value) {
            var childrenList = ''
            value.children.forEach(function (child) {
                childrenList += '<div class="section" onclick="getPage(' + child.src + ')">' + child.title + '</div>'
            })
            chapterStr += '<div class="chapter"><div class="section-left"><div class="section-left-box"><span class="chapter-title">' + value.context + '</span><span class="section-line" style="width: ' + value.children.length * 32 + 'px"></span></div></div><div class="chapter-wrap"><div class="section section-head" onclick="getPage(' + value.src + ')">' + value.title + '</div>' + childrenList + '</div></div>'
        })
        $('.sidebar').html(chapterStr)
        $('#sidebar-button').click(function () {
            $('.sidebar-bg').toggleClass('show-bg')
            $('.sidebar').toggleClass('show-sidebar')
        })
        if (page === 1) {
            $('#prev').attr('disabled', true)
        }
        if (page === 28) {
            $('#next').attr('disabled', true)
        }
        $('#prev').click(function () {
            if (page > 1) {
                getPage("//" + location.host + location.pathname + "?page=" + (page - 1))
            }
        })
        $('#next').click(function () {
            if (page < 29) {
                getPage("//" + location.host + location.pathname + "?page=" + (page + 1))
            }
        })
        $('.sidebar').click(function () {
            $('.sidebar').removeClass('show-sidebar')
            $('.sidebar-bg').removeClass('show-bg')
        })
        // $(document).scroll(function() {
        //     if ($(document).height() - $(document).scrollTop() > $(window).height() * 1.5 || $(document).height() < $(window).height()) {
        //         $('.pagination').addClass('fixed-pagination')
        //     } else {
        //         $('.pagination').removeClass('fixed-pagination')
        //     }
        // })
        $.ajax({
            type: 'GET',
            url: 'http://testjw.qsyuwen.cn/api/v2/edu/aboutUs/detail',
            data: {page: page},
            success: function (res) {
                // 后台传入模板字符串
                $('.content').html(res.data.content)
            },
            dataType: 'JSON'
        })
    })
</script>
</html>